<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
    <style>
        #div{
            transition: background-color 2s,border-radius 2s,transform 2s;
            
            width: 200px;
            height: 200px;
        }
        .green{
            background-color: green;
            border: 1px solid green;
            border-radius: 0%;
            transform: rotate(90deg);
        }
        .red{
            background-color: red;
            border: 1px solid red;
            transform: rotate(180deg);
            border-radius: 0%;
        }
        .yellow{
            background-color: yellow;
            border: 1px solid yellow;
            transform: rotate(240deg);
            border-radius: 0%;
        }
        .zfx{
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
       url：
       <!-- 希望可以把下面的model中的链接，动态渲染到href属性中 -->
       <a v-bind:href="url">蜗牛官网</a>
       <!-- :是缩写，可以动态绑定model中的值 -->
        <input :type="type" :value="username"></input>
        <br>
        <hr>
        <!-- 第一种写法 -->
        <div id="div" :class="colorName" @click="colorChange"></div>
        <!-- 这种对象形式写法，表示的是，是否存在这个key属性值 -->
        <!-- <div id="div" :class="{green:flag,yellow:!flag}"></div> -->
     <!-- 这种数组形式写法，直接就是多个变量 -->
     <!-- <div id="div" :class="[green,zfx]"></div> -->
     <!-- 高级写法 用对象写法 注意对象写法样式不能所有 横杠，需要换成大写-->
     <!-- <div id="div" :style="{ backgroundColor : colorName,marginLeft:size}"></div> -->
     <!-- <div style="background-color: yellow;border: 1px red solid;height: 200px;"></div> -->
    </div>
    <script>
       let vm = new Vue({
            el:"#app",
            data() {
                return {
                    url:"http://www.woniuxy.com",
                    username:"admin",
                    colorName:"red",
                    flag:false,
                    green:'yellow',
                    zfx:'zfx',
                    size:'30px',
                    type:"password",
                    color:['red','yellow','green'],
                    times:0
                }
            },
            methods: {
                colorChange(){
                    this.times++;
                    if(this.times==3){
                        this.times = 0;
                    }
                    this.colorName = this.color[this.times];
                }
            },
        });
    </script>
</body>
</html>